<template>
  <div class="xiang_qing">
    <div>
      <van-nav-bar
        title="眉州路515弄"
        @click-left="$router.go(-1)"
        left-arrow
      />
      <div class="pic">
        <img
          src="http://liufusong.top:8080/uploads/upload_e867961d311af6b0ca1d63434757f233.jpg"
          alt=""
        />
      </div>
      <div class="bgc">
        <div class="title">
          <div class="h4"><h4>3212311</h4></div>
          <div class="tags">
            <div class="span"><span>近地铁</span></div>
          </div>
        </div>
        <div class="one"></div>
        <div class="bodytitle">
          <div class="title1">
            <span>132/月</span>
            <p>租金</p>
          </div>
          <div class="title1">
            <span>一室</span>
            <p>房型</p>
          </div>
          <div class="title1">
            <span>231平米</span>
            <p>面积</p>
          </div>
        </div>
        <div class="one"></div>
        <div class="zxbox">
          <div class="box2">
            <div class="zx"><p>装修：</p></div>
            <div><p>精装</p></div>
          </div>
          <div class="box3">
            <div class="zx"><p>朝向：</p></div>
            <div><p>南</p></div>
          </div>
        </div>
        <div class="hez">
          <div class="zxbox">
            <div class="box2">
              <div class="zx"><p>楼层：</p></div>
              <div><p>高楼层</p></div>
            </div>
            <div class="box3">
              <div class="zx"><p>类型：</p></div>
              <div><p>普通住宅</p></div>
            </div>
          </div>
        </div>
      </div>
      <div class="xiaoq">
        <p>小区：</p>
        <p>天山星城</p>
      </div>
      <div class="ditu"></div>
      <div class="box4">
        <h4>房屋配套</h4>
        <div class="one"></div>
        <div class="zs">
          <van-grid :column-num="5" :border="false">
            <van-grid-item icon="send-gift-o" text="衣柜" />
            <van-grid-item icon="cluster-o" text="洗衣机" />
            <van-grid-item icon="bullhorn-o" text="空调" />
            <van-grid-item icon="fire-o" text="天然气" />
            <van-grid-item icon="hotel-o" text="冰箱" />
            <van-grid-item icon="bulb-o" text="暖气" />
            <van-grid-item icon="tv-o" text="电视" />
            <van-grid-item icon="paid" text="热水器" />
            <van-grid-item icon="cashier-o" text="宽带" />
            <van-grid-item icon="flower-o" text="沙发" />
          </van-grid>
        </div>
      </div>
      <div class="box5">
        <h4>房源概况</h4>
        <div class="one"></div>

      </div>
    </div>
    <div class="fotter"></div>
    <div>
      <van-goods-action>
        <van-goods-action-button icon="star-o" text="收藏" />
        <div class="two"></div>
        <van-goods-action-button text="在线咨询" />
        <van-goods-action-button
          text="电话预约"
          type="info  "
          style="background-color: #21b97a"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
export default {
  name: 'xiang_qing'
}
</script>

<style lang="less" scoped>
.xiang_qing {
  background-color: #f6f5f6;
  .pic {
    // background-color: blue;
    height: 252px;
    img {
      height: 252px;
    }
  }
  .bgc {
    background: #fff;
    .title {
      height: 80px;
      margin-top: -5px;
      margin-left: 12px;
      .h4 {
        margin-top: 20px;
        padding-top: 1px;
        margin-bottom: 10px;
      }
      .tags {
        width: 46px;
        height: 20px;
        color: #39becd;
        margin-top: 2px;
        text-align: center;
        background: #e1f5f8;
        .span {
          margin-top: -10px;
          font-size: 12px;
        }
      }
    }
    .bodytitle {
      display: flex;
      .title1 {
        margin-right: 20px;
        margin-top: 15px;
        margin-left: 40px;
        span {
          color: red;
          font-size: 18px;
          font-weight: 900;
        }
        p {
          margin-top: 3px;
          margin-left: 5px;
          font-size: 15px;
          color: #bbada4;
        }
      }
    }
    .zxbox {
      margin-left: 30px;
      margin-right: 80px;
      margin-top: 8px;
      display: flex;
      font-size: 13px;

      justify-content: space-between;
      .box2 {
        display: flex;
      }
      .box3 {
        display: flex;
      }
      .zx p {
        color: #bbada4;
      }
    }
  }
}
.one {
  margin-top: 15px;
  margin-left: 10px;
  height: 1px;
  width: 90%;
  background-color: #ccc;
}
.hez {
  margin-top: -25px;
}
.two {
  width: 2px;
  height: 50px;
  background-color: #b2aea9;
}
.fotter {
  height: 100px;
}
.box4 {
  margin-top: -20px;
  background-color: #fff;
.zs {
  padding-top: 10px;
}
}
.box5 {
  background-color: #fff;
}
.xiaoq {
  display: flex;
  height: 50px;
  margin-top: 15px;
  background-color: #fff;
}
.ditu {
  height: 200px;
  background-color: blue;
}
</style>
